<template>
	<view>
		<view class="my-family-select">
			<view class="my-family-select-title">
				房号
			</view>
			<picker @change="bindPickerChange" :value="index" :range="rooms" range-key="CSName">
				<view class="my-family-select-info">
					<view class="my-family-select-area">
						{{rooms[index].CoName}}
					</view>
					<view class="my-family-select-name">
						{{rooms[index].CSName}}
					</view>
				</view>
			</picker>
			<view class="my-family-select-icon">
				<up-icon name="arrow-right" color="#aaa" :size="22"></up-icon>
			</view>
		</view>
		<view class="my-family-title" v-if="owner">
			业主信息
		</view>
		<view class="my-family-list" v-if="owner">
			<view class="my-family-list-item">
				<up-cell :icon-style="iconStyle" :border="false" :icon=" domain + owner.HeadImage"
					:title="owner.Name + owner.Mobile" :isLink="true" arrow-direction="right" value="采集人脸"></up-cell>
			</view>
		</view>
		<view class="my-family-title" v-if="families">
			家人信息
		</view>
		<view class="my-family-list" v-if="families">
			<up-cell-group :border="false">
				<uni-swipe-action ref="swipeAction1">
					<uni-swipe-action-item v-for="family in families" @click="onClick($event, family)" :key="family.HId"
						:right-options="options">
						<view @click="handleFace(family)">
							<up-cell :icon-style="iconStyle" :border="false" :icon="domain + family.HeadImage"
								:title="family.Name + family.Mobile" :isLink="true" arrow-direction="right"
								:value="family.Relation"></up-cell>
						</view>
					</uni-swipe-action-item>
				</uni-swipe-action>
			</up-cell-group>
		</view>
		<view class="my-family-title" v-if="renters">
			租客信息
		</view>
		<view class="my-family-list" v-if="renters">
			<up-cell-group :border="false">
				<uni-swipe-action ref="swipeAction1">
					<uni-swipe-action-item v-for="family in renters" :key="family.HId" :right-options="options">
						<view @click="handleFace(family)">
							<up-cell :icon-style="iconStyle" :border="false" :icon="domain + family.HeadImage"
								:title="family.Name + family.Mobile" :isLink="true" arrow-direction="right"
								:value="family.Relation"></up-cell>
						</view>
					</uni-swipe-action-item>
				</uni-swipe-action>

			</up-cell-group>
		</view>
		<view class="my-family-tips" v-if="owner">
			如果您是业主，可向左滑动家人或租客的卡片并删除，解除房屋绑定关系。
		</view>

		<view class="my-bootom-btn">
			<up-button type="success" shape="circle" text="添加租客" @click="handleClick('添加租客')"></up-button>
			<up-button type="success" shape="circle" text="添加家人" @click="handleClick('添加家人')"
				style="margin-left: 20rpx;"></up-button>
		</view>
	</view>
</template>

<script setup>
	import mineApi from '../../../api/mine';
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		onShow
	} from '@dcloudio/uni-app'
	const options = [{
		text: '删除',
		style: {
			backgroundColor: '#dd524d'
		}
	}]
	const iconStyle = {
		width: "60rpx",
		height: "60rpx",
		marginRight: "10rpx",
		borderRadius: "10rpx"
	}
	const domain = "http://rke.xjznpt.cn/"
	const index = ref(0)
	const rooms = ref([{
		RId: 0,
		CoName: "",
		CSName: ""
	}]);
	const swipeAction1 = ref(null)
	onMounted(() => {
		getData();
	});
	onShow((options) => {
		getData();
	});
	const getData = async () => {
		const res = await mineApi.getMyFamilyRoom();
		rooms.value = res.Data;
		await getFamilyList();
	}
	const bindPickerChange = (e) => {
		index.value = e.detail.value
	};

	const owner = ref({})
	const families = ref([])
	const renters = ref([])
	const getFamilyList = async () => {
		const roomId = rooms.value[index.value].RId;
		const res = await mineApi.getMyFamilyList({
			roomId,
			Hid: ""
		});
		console.log(res);
		const {
			House,
			Family,
			Renter
		} = res.Data;
		House && (House.HeadImage = House.HeadImage ? domain + House.HeadImage : "");
		Family && Family.forEach(item => {
			item.HeadImage = item.HeadImage ? domain + item.HeadImage : "";
		});
		Renter && Renter.forEach(item => {
			item.HeadImage = item.HeadImage ? domain + item.HeadImage : "";
		});
		owner.value = House;
		families.value = Family;
		renters.value = Renter;
	}

	const handleClick = (addType) => {
		let room = rooms.value[index.value];
		uni.navigateTo({
			url: "./add?type=" + addType + "&room=" + JSON.stringify(room),
		})
	}

	const onClick = async (e, family) => {
		console.log(e, family);
		const roomId = rooms.value[index.value].RId;
		const HId = family.HId;
		const res = await mineApi.delHouseById({
			roomId,
			HId
		});
		console.log(res);
		getData();
	}

	const handleFace = (family) => {
		uni.navigateTo({
			url: "./info?info=" + JSON.stringify(family) + "&room=" + JSON.stringify(rooms.value[index.value]),
		})
	}
</script>

<style lang="scss" scoped>
	.my-family-select {
		margin-top: 40rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 40rpx;
		background-color: #fff;

		.my-family-select-title {
			color: #aaa;
		}

		picker {
			flex: 1;
		}

		.my-family-select-info {
			text-align: right;

			.my-family-select-area {
				font-size: 32rpx;
			}
		}
	}

	.my-family-title {
		padding: 20rpx 40rpx;
		font-size: large;
	}

	.my-family-list {
		background-color: #fff;
		padding: 20rpx 40rpx;
	}

	.my-family-tips {
		padding: 20rpx 40rpx 0;
		font-size: small;
		color: #aaa;
		text-align: center;
	}

	.my-bootom-btn {
		box-sizing: border-box;
		position: fixed;
		width: 100%;
		background-color: #fff;
		bottom: 0;
		padding: 20rpx 40rpx 40rpx;
		display: flex;
		justify-content: space-evenly;
	}
</style>